<template>
  <el-container class="info-container">
   <el-header class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <el-page-header title=" ">
			  <template #icon>
			  	<el-icon @click="back"><ArrowLeftBold/></el-icon>
			  </template>
            <template #content>
              <span class="text">详细信息</span>
            </template>
          </el-page-header>
        </div>
      </div>
    </el-header>
    <el-main class="main">
      <el-card v-if="info" class="grid-form">
        <el-descriptions class="margin-top" title="反馈详情" :column="1" border>
        <el-descriptions-item label="省">{{ info.province }}</el-descriptions-item>
        <el-descriptions-item label="市">{{ info.city }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ info.address }}</el-descriptions-item>
        <el-descriptions-item label="级别">{{ info.level }}</el-descriptions-item>
        <el-descriptions-item label="信息">{{ info.message }}</el-descriptions-item>
        <el-descriptions-item label="日期">{{ info.date }}</el-descriptions-item>
        <el-descriptions-item label="时间">{{ info.time }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ info.status }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

let route = useRoute();
let router = useRouter();
let info = ref(null);

let getchoose = async function(id) {
  let response = await axios.get("http://localhost:7000/service-neps/supervisor/getchoose", { params: { id:id } });
  info.value = response.data;
};

console.log(route.query.id);
onMounted(() => {
  let id = route.query.id;
  if (id) {
    getchoose(id);
  }
});

let back = function() {
  router.push({ path: '/feedbackList' });
};
</script>

<style scoped>
.info-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: url('@/assets/kongjing2.jpg') no-repeat center center;
  background-size: cover;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #96afc5, #96afc3);
  color: white;
  padding: 10px;
  width: 100%;
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 将主轴方向改为垂直排列 */
   margin-top: 0; /* 确保顶部间距为0 */
  margin-bottom: 0; /* 确保底部间距为0 */
  height: 100vh; /* 使主容器占满整个视口高度 */
}
.grid-form {
  width: 67vw;
  max-width: 400px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.el-descriptions {
  margin-top: 20px;
}
.el-card {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
}

</style>
